<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .banner-show {
        width: 250px;
        height: 150px;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
    }

    .banner-show .content {
        list-style-type: none;
        width: 700%;
        height: 100%;
        display: flex;
        margin-left: -100%;
        transition: margin-left 0.5s ease;
    }

    .banner-show .content .item {
        width: 250px;
        height: 150px;
        background-size: cover;
        /*图片完整*/
        background-position: center;
    }

    .banner-show .left,
    .banner-show .right {
        height: 100%;
        width: 40px;
        /* 宽度适中，不遮挡图片 */
        margin-top: 0;
        /* 取消之前的负边距，因为height=100%已居中 */
        top: 0;
        /* 顶部对齐，配合height=100%实现全屏高 */
        position: absolute;
        border: none;
        /* 消除边框和默认样式 */
        color: rgba(255, 255, 255, 0.6);
        font-size: 24px;
        font-weight: 300;
        cursor: pointer;

    }

    .banner-show .left:hover,
    .banner-show .right:hover {
        color: rgba(255, 255, 255, 0.9);
    }

    .banner-show .left:hover {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    }

    .banner-show .right:hover {
        background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    }

    .banner-show .left {
        left: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

    }

    .banner-show .right {
        right: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

    }

    /* 锚点容器：居中显示 */
    .banner-show .dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        /* 锚点之间的间距 */
        z-index: 10;
    }

    /* 锚点通用样式：空心圆 */
    .banner-show .dots .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid white;
        /* 空心圆的边框颜色 */
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* 实心圆样式（当前激活的锚点） */
    .banner-show .dots .dot.active {
        background-color: white;
        /* 实心颜色 */
        border-color: white;
        transform: scale(1.2);
        /* 轻微放大，增强视觉反馈 */
    }


    @keyframes bannershow {
        from {
            margin-left: 0;
        }

        to {
            margin-left: -500%;
        }
    }
</style>

<body>
    <div class="banner-show">
        <ul class="content">
            <li class="item" style="background-image: url(imglunbotu/l5.jpg);"></li>
            <li class="item" style="background-image: url(imglunbotu/l1.jpg);"></li>
            <li class="item" style="background-image: url(imglunbotu/l2.jpg);"></li>
            <li class="item" style="background-image: url(imglunbotu/l3.jpg);"></li>
            <li class="item" style="background-image: url(imglunbotu/l4.jpg);"></li>
            <li class="item" style="background-image: url(imglunbotu/l5.jpg);"></li>
            <li class="item" style="background-image: url(imglunbotu/l1.jpg);"></li>
        </ul>
        <button class="right">&gt;</button>
        <button class="left">&lt;</button>
        <div class="dots"></div>
    </div>


    <script>
        let index = 1;
        let left = document.querySelector(".left");
        let right = document.querySelector(".right");
        let content = document.querySelector(".content");
        let flag = true;
        right.onclick = function () {
            rigcl();
        }
        function rigcl() {
            if (flag) {
                flag = false;
                index++;
                if (index == 6) {
                    content.style.marginLeft = (-index * 100) + "%";
                    setTimeout(function () {
                        content.style.transition = "none";
                        index = 1;
                        content.style.marginLeft = (-index * 100) + "%";
                        setTimeout(function () {
                            content.style.transition = "margin-left 0.5s";

                        }, 100)
                    }, 500)
                } else {
                    content.style.marginLeft = (-index * 100) + "%";
                }
                setTimeout(function () {
                    flag = true;
                }, 600)
            }
        }
        left.onclick = function () {
            if (flag) {
                flag = false;
                index--;
                if (index == 0) {
                    content.style.marginLeft = (-index * 100) + "%";
                    setTimeout(function () {
                        content.style.transition = "none";
                        index = 5;
                        content.style.marginLeft = (-index * 100) + "%";
                        setTimeout(function () {
                            content.style.transition = "margin-left 0.5s";
                        }, 100)
                    }, 500)
                } else {
                    content.style.marginLeft = (-index * 100) + "%";
                }
                setTimeout(function () {
                    flag = true;
                }, 600)
            }
        }
        let t = setInterval(rigcl, 2000);
        content.onmouseover = function () {
            clearInterval(t);
        }
        content.onmouseout = function () {
            t = setInterval(rigcl, 2000);
        }

    </script>
</body>

</html>